<template>
	<view class="">
		<view class="headers">
			<u-navbar :is-back="false" :border-bottom="false" :background="background">
				<view class="d-flex w-100 ">
					<view class=" pl-2 py-2"  @click="backtrack_img">
						<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
					</view>
					<view class="font-lg font-weight text-white mx-2 py-1">新增客户</view>
					<view @click="yaoqingzhuce" class="yaoqingzhuce py-1 font-weight text-white">[邀请注册]</view>
				</view>
			</u-navbar>
			<view class="header w-100 d-flex a-center border-bottom">
				<view class="d-flex py-1 mx-2 px-2  rounded-15 bg-f2 w-100">
					<u-icon name="search" color="#666666" size="40" @click="search"></u-icon>
					<view class="flex-1 ml-2">
						<input type="text" confirm-type="search" class="flex-1" v-model="keywords" @input="key_input" @confirm="confirm_seach" value="" placeholder="(平台注册客户)昵称/手机号" />
					</view>	
				</view>	
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower"
		 refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view v-else>
				<view class="" v-if="terrace">
					<view class="py-4 px-2 bg-white d-flex j-sb a-center border-bottom" v-for="(item,index) in terrace" :key='index'>
						<view class="d-flex a-center">
							<view class=""><image class="terrace_img rounded-circle-50" :src="item.user_picture?item.user_picture:'../../static/images/order/default-photo.png'" mode=""></image></view>
							<view class="font-35 text-000 ml-2">
								<view class="d-flex font-weight">
									<rich-text :nodes="item.user_name"></rich-text><text class="ml-2">{{item.mobile_phone}}</text>
								</view>
								<view class="text-333 my-1">{{item.nick_name}}</view>
								<view class="text-999 font-28">注册时间:{{item.formatted_reg_time}}</view>
							</view>
						</view>
						<view class="">
							<view class="check" @click="checkTo(item)">审核</view>
						</view>
					</view>
					<view class="py-2" v-if="!terrace.length<=0">
						<view class="" v-if="terrace.length==total"  @click="loadmores">
							<u-loadmore status="nomore" icon-type="circle" />
						</view>
						<view class="" v-else >
							<u-loadmore status="loading" icon-type="circle" />
						</view>
					</view>
				</view>
				<view v-else>
					<view class="">
						<view class="py-4 px-2 bg-white border-bottom" @click="client_detail(item)" v-for="(item,index) in store_users" :key='index'>
							<view class="d-flex">
								<view class=""><image class="terrace_img rounded-circle-50" :src="item.user_picture?item.user_picture:'../../static/images/order/default-photo.png'" mode=""></image></view>
								<view class="font-35 text-000 ml-2 my-1">
									<view class="d-flex font-weight">
										<rich-text :nodes="item.user_name"></rich-text><text class="ml-2">{{item.mobile_phone}}</text>
									</view>
									<view class="text-333 my-1 h_40">{{item.company_name}}</view>
								</view>
							</view>	
							<view class="d-flex j-sb">
								<view class="h_40 my-1 text-666">最近下单:无 累计: {{item.order_count}}</view>
								<view class="h_40 my-1 text-666">{{item.yewu_name}}</view>
							</view>	
						</view>
					</view>
					<view class="py-2" v-if="!store_users.length<=0">
						<view class="" v-if="store_users.length==total"  @click="loadmores">
							<u-loadmore status="nomore" icon-type="circle" />
						</view>
						<view class="" v-else >
							<u-loadmore status="loading" icon-type="circle" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default{
		data(){
			return {
				background: {
					background: '#fa7226',
					// background-size: 100% 121px;
					backgroundSize: 'cover',
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'				
				},
				u_loadmore:true, // 加载中
				terrace:"", // 平台列表
				
				more:1, // 第几页
				count:10, // 条数
				total:0,// 总条数
				scrollHeight:0, // 自适应高度
				old: {
					scrollTop: 0
				},
				scrollTop:0,
				firstFocus:false,// 下拉刷新
				triggered: false, // 下拉刷新
				keywords:"", // 关键字
				
				timers:null, // 倒计时
				
				seach_show:null,
				
				store_users:"" // 店铺的会员
			}
		},
		watch:{
			keywords(val, oldVal){
				// if(val==""){
				// 	this.$H.post("v2/store/region/users").then(res=>{
				// 		this.terrace=res.data
				// 		this.total=res.paginated.total
				// 		this.seach_show=false
				// 	})
				// }
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.headers').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			// 下拉刷新 自定义下拉刷新控件被下拉
			 onPulling(e) {
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			},
			// 返回
			backtrack_img(){
				uni.navigateBack({
					delta:1
				})
			},
			// 搜索
			key_input(e){
				this.keywords=e.detail.value
			},
			confirm_seach(){
				if(this.keywords==''){
					this.showToast('请输入关键字')
					return
				}
				
				
				this.$H.post("v2/store/region/users",{
					keywords:this.keywords,
				}).then(res=>{
					clearTimeout(this.timers);
					this.timers = null; 
					this.seach_show=false
					
					if(res.data.length){
						this.terrace=res.data
						this.total=res.paginated.total
					}else{
						this.$H.post("v2/store/users",{
							keywords:this.keywords
						}).then(res=>{
							if(res.data.length){
								uni.navigateTo({
									url:`/pagesB/client/client-detail?store_user_id=${res.data[0].store_user_id}&user_id=${res.data[0].user_id}&isshow=true`
								})
								
							}
						})
					}
					console.log(res)
				})
			},
			search(){
				this.$H.post("v2/store/region/users",{
					keywords:this.keywords,
				}).then(res=>{
					console.log("到没到这", res.data)
					if(res.paginated){
						this.terrace=res.data
						this.total=res.paginated.total
						console.log(res)
					}else{
						this.$H.post("v2/store/users",{
							keywords:this.keywords
						}).then(res=>{
							if(res.data){
								uni.navigateTo({
									url:`/pagesB/client/client-detail?store_user_id=${res.data[0].store_user_id}&user_id=${res.data[0].user_id}`
								})
								
							}
						})
					}
					
				})
			},
			// 审核
			checkTo(item){
				uni.navigateTo({
					url:`/pagesB/client/check`
				})
				uni.setStorageSync("terrace_item",JSON.stringify(item))
			},
			// 加载数据
			getData(){
				this.$H.post("v2/store/users",{
					pagination:{
						count:this.count,
						page:this.more
					},
				}).then(res=>{
					console.log(res.data)
					this.store_users=res.data
					this.u_loadmore=false
				})
			},
			// 回到顶部
			loadmores(){
				this.scrollTop = this.old.scrollTop
				console.log(this.scrollTop)
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if(that.store_users.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			},
			// 滚动时触发
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},	
			// 客户详情
			client_detail(item){
				uni.navigateTo({
					url:`/pagesB/client/client-detail?store_user_id=${item.store_user_id}&user_id=${item.user_id}`
				})
			},
			yaoqingzhuce(){
				uni.navigateTo({
					url:`/pagesB/yaoqingzhuce/yaoqingzhuce`
				})
			}
		},
		onLoad() {
			// this.date_type='today'
			this.$H.post("v2/store/users",{
				pagination:{
					count:this.count,
					page:this.more
				},
			}).then(res=>{
				this.store_users=res.data
				this.u_loadmore=false
				this.total=res.paginated.total
			})
		},
		onShow() {
			this.seach_show=getApp().globalData.seach_show
			console.log(getApp().globalData.seach_show)
			if(this.seach_show){
				this.$H.post("v2/store/users",{
					pagination:{
						count:this.count,
						page:this.more
					},
				}).then(res=>{
					this.store_users=res.data
					this.u_loadmore=false
				})
			}
		}
	}
</script>

<style>
	.terrace_img{
		width: 120upx;
		height: 120upx;
	}
	.yaoqingzhuce{
		font-size: 35rpx;
		line-height: 60rpx;
	}
	.check{
		width: 150upx;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		font-size: 35upx;
		color: #ff9f30;
		border-radius: 10upx;
		border: 1px solid #EAEAEA;
	}
	.header{
		height: 125upx;
		background-color: #FA7226;
	}
	.h_40{
		height: 40upx;
	}
</style>
